import React, {Fragment} from 'react';
import { Button, Drawer, Popconfirm, Space, Table,message } from 'antd';
import AddDept from './AddDept';
import EditDept from "./EditDept";


class Demo2 extends React.PureComponent {
  columns = [
    {
      title: '序号',
      key: 'action',
      render: (_,record,index) => (
        index+1
      ),
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
    },
    {
      title: '部门拼音',
      dataIndex: 'deptPy',
      key: 'deptPy',
    },
    {
      title: '部门联系人电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        // console.log(record),
        const pop = "是否删除" + record.deptName;
        return(
          <Space size="middle">
            <a onClick={() => this.handleEdit(record)}>编辑</a>
            <Popconfirm
              title={pop}
              onConfirm={() => this.deleteConfirm(record)}
              onCancel={this.deleteCancel}
              okText="Yes"
              cancelText="No"
            >
              <a>删除</a>
            </Popconfirm>
          </Space>)
      },
    },
  ];

  deleteConfirm=(record)=>{
    let url = "http://1.94.134.166:8805/dept/"+record.deptId;
    fetch(url,{
      method:"DELETE",
      headers:{
        'Content-Type': 'application/json',
        Authorization:localStorage.getItem('Authorization')
      },
    })
      .then((response)=>response.json())
      .then((res)=>{
        console.log(res);
        const {code=0,msg=""}=res;
        if(code==0){
          this.refreshData();
          message.info(msg);
          // this.props.refresh();
          // this.props.closeDrawer();
          // this.formRef.current.resetFields();
        }
      });
  }

  deleteCancel=()=>{

  }


  handleEdit=(data)=>{
    this.setState({
      editVisible:true,
      currentDept:data
    });
  }

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      tableData: [],
      editVisible:false,
      currentDept:{},
    };
  }

  refreshData = () => {
    let url = 'http://1.94.134.166:8805/dept/list?parentId=0';
    fetch(url, {
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('Authorization'),
      },
    })
      .then((response) => response.json())
      .then((res) => {
        console.log(res);
        console.log('0' === false);
        const {data} = res;
        this.setState({
          tableData: data,
        });
      });
  }

  componentDidMount() {
    this.refreshData();
  }

  handleOpenDrawer = () => {
    this.setState({visible: true});
  };

  onClose = () => {
    this.setState({visible: false});
  };
  onEditDrawerClose = ()=>{
    this.setState({editVisible:false});
  }


  render() {
    return (
      <Fragment>
        <Button type="primary" onClick={this.handleOpenDrawer}>
          新增
        </Button>
        <Table
          dataSource={
            this.state.tableData
            // this.dataSource
          }
          columns={this.columns}
        />;
        <Drawer title="新增部门"
                placement="right"
                onClose={this.onClose}
                open={this.state.visible}>
          <AddDept refresh={this.refreshData} closeDrawer={this.onClose}/>
        </Drawer>

        <Drawer title="编辑部门"
                placement="left"
                onClose={this.onEditDrawerClose}
                open={this.state.editVisible}>
          <EditDept refresh={this.refreshData} closeDrawer={this.onEditDrawerClose} currentData={this.state.currentDept}/>
        </Drawer>
      </Fragment>
    );
  }
}

export default Demo2;
